<!doctype html>
<html lang='en'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>OKAPI JavaScript Example</title>
        <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
        <script>
            $(function() {

                // Fill the OKAPI installations select-box with dynamic installation list.

                $.ajax({
                    url: 'http://opencaching.pl/okapi/services/apisrv/installations',
                    dataType: 'json',
                    success: function(installations) {
                        for (var i in installations) {
                            var inst = installations[i];
                            $('#installations').append(
                                $("<option></option>")
                                .attr('value', inst.okapi_base_url)
                                .text(inst.okapi_base_url)
                            );
                        }
                    }
                });

                $('#get_nearest').click(function() {
                    $('#get_nearest').hide();
                    $('#results').text("Attempting to access your location...");
                    if (navigator.geolocation)
                    {
                        navigator.geolocation.getCurrentPosition(
                            function(position) {
                                $('#results').text("Location acquired! Search for geocaches...");
                                $.ajax({
                                    url: $('#installations option:selected').attr('value') + 'services/caches/shortcuts/search_and_retrieve',
                                    dataType: 'json',
                                    data: {
                                        'search_method': 'services/caches/search/nearest',
                                        'search_params': '{"center": "' + position.coords.latitude + "|" +
                                            position.coords.longitude + '", "limit": 5}',
                                        'retr_method': 'services/caches/geocaches',
                                        'retr_params': '{"fields": "code|name|url"}',
                                        'wrap': 'false',
                                        'consumer_key': $('#consumer_key').attr('value')
                                    },
                                    success: function(response) {
                                        var ul = $("<ul></ul>");
                                        for (var cache_code in response) {
                                            var cache = response[cache_code];
                                            var li = $("<li><a></a></li>");
                                            li.find('a').attr('href', cache.url).text(cache.name);
                                            ul.append(li);
                                        }
                                        $('#results').html("<p>Nearest geocaches:</p>");
                                        $('#results').append(ul);
                                    },
                                    error: function() {
                                        $('#results').text("Error :( Have you entered a valid Consumer Key?");
                                    }
                                });
                            },
                            function (error) {
                                $('#results').text("Your browser refused to give me your location.");
                            }
                        );
                    } else {
                        $('#results').text("Your browser does not support geolocation.");
                    }
                });
            });
        </script>
        <style>
            a { color: #008; text-decoration: underline; cursor: pointer; }
        </style>
    </head>
    <body>
        <p>Select OKAPI installation: <select id='installations'></select></p>
        <p>Enter your Consumer Key: <input type='text' id='consumer_key'></p>
        <p><a id='get_nearest'>Click here to view the nearest caches</a></p>
        <div id='results'></div>
    </body>
</html>
